<template>
    <div class="head">
        <van-nav-bar title="景区地图" left-arrow @click-left="onClickLeft" />
    </div>
    <van-tabs v-model:active="active" sticky shrink>
        <van-tab v-for="(item, index) in scenicTab" :title="item.name"></van-tab>
        <img class="tab" src="../assets/fenlei.png" alt="" @click="icon = true">
    </van-tabs>
    <div class="tabButton" v-if="icon == true">
        <div class="tabButton_head">
            <p>全部</p>
            <img src="../assets/x.png" alt="" @click="icon = false">
        </div>
        <div class="tabButton_icon">
            <div class="icon" v-for="(item, index) in scenicTab" @click="active = index, icon = false">
                <img :src=item.img alt="">
                <p>{{ item.name }}</p>
            </div>
        </div>
    </div>
    <MapContainer :active="active"></MapContainer>
</template>

<script>
import { ref, onUpdated } from "vue";
import MapContainer from "../components/MapContainer";
import axios from "axios";
import { closeDialog } from "vant";
export default {
    components: {
        MapContainer
    },
    setup() {
        const icon = ref(false)
        let scenicData = JSON.parse(sessionStorage.getItem("scienceData")) //获取本地数据景区信息
        console.log(scenicData);
        const onClickLeft = () => history.back(); //返回上一页
        const active = ref(0);
        const scenicTab = ref({});
        axios({ //请求景点标识
            url: "/api/science/tab", // url
            params: {
                // 参数
                scienceid: scenicData.id
            },
        })
            .then(function (res) {
                console.log(res); // 成功回调
                scenicTab.value = res.data.data
                sessionStorage.setItem("scienceTab", JSON.stringify(res))
                reuqest(res.data.data[active.value].id)
            })
            .catch(function (err) {
                console.log(err); // 失败回调
            });

        function reuqest(tid) {
            axios({ //请求景点标识
                url: "/api/science/map", // url
                params: {
                    // 参数
                    scienceid: scenicData.id,
                    tabid: tid,
                },
            })
                .then(function (res) {
                    console.log(res); // 成功回调
                    sessionStorage.setItem("scienceMap",JSON.stringify(res))
                })
                .catch(function (err) {
                    console.log(err); // 失败回调
                });
        }
        
        onUpdated(() => {
            reuqest(scenicTab.value[active.value].id)
        })
        return {
            onClickLeft,
            active,
            scenicTab,
            icon,
        }
    }
}
</script>

<style scoped>
.tab {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 98;
}

.tabButton {
    width: 100%;
    height: auto;
    position: absolute;
    top: 46px;
    background-color: white;
    z-index: 99;
}

.tabButton_head {
    width: 100%;
    height: auto;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.tabButton_head img {
    width: 30px;
    height: 30px;
}

.tabButton_icon {
    width: 100%;
    height: auto;
    display: flex;
    margin: 10px 0;
}

.icon {
    width: 25%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.icon p {
    width: 100%;
    height: auto;
    line-height: 2;
    text-align: center;
}

.icon img {
    width: 40px;
    height: 40px;
}
</style>